<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <c:set var="path" value="${pageContext.request.contextPath}"></c:set>
    <link rel="shortcut icon" href="${path}/images/titleico.ico">
    <link rel="stylesheet" href="${path}/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${path}/layui/css/formSelects-v4.css">
    <script src="${path}/layui/layui.js"></script>
    <script src="${path}/js/jquery.js"></script>
</head>
<body>
<br>
<h1 style="text-align: center">管理员列表</h1>
<hr class="layui-bg-blue">
<div class="layui-form-item">
    <div class="layui-inline">
        <div class="layui-form" action="">
            <!--用户名-->
            <label class="layui-form-label">用户名：</label>
            <div class="layui-input-inline" style="width: 175px;">
                <input value="" id="mingcheng" name="name" type="text" autocomplete="off" class="layui-input">
            </div>
            <!--查询-->
            <div class="layui-input-inline" style="width: 100px;">
                <button class="layui-btn layui-btn-normal" onclick="searchData();"><i class="layui-icon layui-icon-search"></i> 查询</button>
            </div>
        </div>
    </div>
</div>
<hr class="layui-bg-blue">
<table class="layui-table" lay-data="{
            id:'adminTable',
            url:'${path}/admin/list',
            page:true,
            toolbar:'#toolbarDemo',
            defaultToolbar: ['filter', 'print', 'exports'],
            even: true,
            loading: true
        }"
       lay-filter="adminTable">
    <thead>
    <tr>
        <th lay-data="{field:'id',width:150,templet:'#idTem',align:'center',style:'background-color: #66BB6A;color: #fff;'}">ID</th>
        <th lay-data="{field:'name', sort: true}">用户名</th>
        <th lay-data="{field:'account'}">账号</th>
        <%--<th lay-data="{field:'password'}">密码</th>--%>
        <th lay-data="{field:'state',templet:'#lockedTem'}">是否可用</th>
        <%--<th lay-data="{toolbar: '#barDemo'}">操作</th>--%>
    </tr>
    </thead>
</table>

<!--添加管理员弹出层-->
<div id="addadmin" style="display: none">
    <br>
    <br>
    <form class="layui-form" lay-filter="adminFrom" id="adminFrom" name="adminFrom">
        <div class="layui-form-item layui-col-md-offset1">
            <div class="layui-inline">
                <div class="layui-form" action="">
                    <input type="hidden" name="id">
                    <!--用户名-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名：</label>
                        <div class="layui-input-block">
                            <input type="text" id="yonghuming" name="name" style="width: 300px;"  autocomplete="off" placeholder="请输入用户名" class="layui-input">
                        </div>
                    </div>
                    <!--账号-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">账号：</label>
                        <div class="layui-input-block">
                            <input type="text" name="account" readonly id="suiji" autocomplete="off" placeholder="" class="layui-input">
                            <br><span style="color: red;font-size: 12px;text-align: right">注意！账号随机发放,请牢记！</span>
                        </div>
                    </div>
                    <!--密码-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码：</label>
                        <div class="layui-input-block">
                            <input type="password" name="password" id="password" autocomplete="off" placeholder="请输入密码" class="layui-input">
                        </div>
                    </div>
                    <!--状态-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">状态：</label>
                        <div class="layui-input-block">
                            <input type="checkbox" id="state" name="state" lay-skin="switch" lay-text="冻结|可用" value="1">
                        </div>
                    </div>
                </div>
            </div>
        </div>
</form>
</div>

<script type="text/html" id="idTem">
    {{d.id< 10 ? 'GLY 0'+d.id :  'GLT '+d.id}}
</script>
<script type="text/html" id="lockedTem">
    {{d.state == 0 ? '可用' : '冻结'}}
</script>
<script>
    function searchData(){
        layui.table.reload("adminTable",{
            page:{
                curr : 1
            },
            where:{
                "name":$("#mingcheng").val()
            }
        });
    }
    //加载表格 表单
    layui.use(["form","table"], function(){
        var table = layui.table;
        //头工具栏事件
        table.on('toolbar(adminTable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case "add":
                    layer.open({
                        type:1,
                        title :'添加管理员',
                        area : '600px',
                        content: $("#addadmin"),
                        skin:'layui-layer-molv',
                        btn : ['确定','取消'],
                        success:function(){
                            fomrReset();
                            roand();
                        },
                        yes : function (index) {
                            var name = $("#yonghuming").val();
                            var suiji = $("#suiji").val();
                            var password = $("#password").val();
                            if(name == null || name == ""){
                                layer.msg("<v style='color:red'>" + "用户名不能为空！" + "</v>", {time: 1200, icon: 5}),function () {
                                    return false;
                                };
                            }else if(suiji == null || suiji == -1){
                                layer.msg("<v style='color:red'>" + "账号不能为空！" + "</v>", {time: 1200, icon: 5}),function () {
                                    return false;
                                };
                            }else if(password == null || password == ""){
                                layer.msg("<v style='color:red'>" + "密码不能为空！" + "</v>", {time: 1200, icon: 5}),function () {
                                    return false;
                                };
                            }else if(password.length < 6){
                                layer.msg("<v style='color:red'>" + "密码不能小于六位数！" + "</v>", {time: 1200, icon: 5}),function () {
                                    return false;
                                };
                            }else{
                                var params = $("#adminFrom").serialize();
                                // console.log(params);
                                $.post('${path}/admin/add',params,function () {
                                    layer.msg("添加成功！");
                                    layer.close(index);
                                    table.reload('adminTable');
                                });
                            }
                        }
                    });
                break;
            };
        });
        //监听行工具时间
        table.on("tool(adminTable)",function (obj) {
            var data = obj.data;
            if (obj.event == 'edit'){
                //edit

            }else if(obj.event == 'del'){
                //delete

            }
        })
    });

</script>

<%--<script type="text/html" id="barDemo">--%>
    <%--<a href="javascript:void(0)" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>&nbsp;&nbsp;&nbsp;--%>
    <%--<a href="javascript:void(0)" lay-event="del"><i class="layui-icon layui-icon-close" style="font-weight: bold"></i></a>--%>
<%--</script>--%>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn layui-btn-normal" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>添加管理员</button>
    </div>
</script>
<script>
   function roand() {
       var s="1234567890";
       var a=8;
       var y="";
       for (var i=0;i<a;i++){
           var b=Math.random()*10;
           var c=Math.floor(b);
           y=y+s[c];
       }
       $("#suiji").val(y);
       // alert(zuhe)

   }
</script>
<script>
    function fomrReset(){
        document.getElementById("adminFrom").reset();
    }
</script>
</body>
</html>